<script setup lang="ts">
import { ref, computed } from 'vue'
import { NCard, NInputNumber, NSpace, NProgress, NText } from 'naive-ui'

const height = ref(170) // 身高（厘米）
const weight = ref(60) // 体重（千克）

const bmi = computed(() => {
  const heightInMeters = height.value / 100
  return +(weight.value / (heightInMeters * heightInMeters)).toFixed(1)
})

const getBMIStatus = computed(() => {
  if (bmi.value < 18.5) return { text: '体重过轻', color: '#2080f0' }
  if (bmi.value < 24) return { text: '体重正常', color: '#18a058' }
  if (bmi.value < 28) return { text: '超重', color: '#f0a020' }
  return { text: '肥胖', color: '#d03050' }
})

const getBMIProgress = computed(() => {
  // 将 BMI 值映射到 0-100 的范围
  // 假设 BMI 范围是 15-35
  return Math.min(100, Math.max(0, ((bmi.value - 15) / 20) * 100))
})
</script>

<template>
  <div class="max-w-md mx-auto">
    <NCard title="BMI 计算器">
      <NSpace vertical size="large">
        <!-- 输入区域 -->
        <NSpace vertical>
          <div class="flex items-center gap-4">
            <span class="text-gray-500 w-16">身高：</span>
            <NInputNumber v-model:value="height" :min="100" :max="250" :step="1">
              <template #suffix>cm</template>
            </NInputNumber>
          </div>

          <div class="flex items-center gap-4">
            <span class="text-gray-500 w-16">体重：</span>
            <NInputNumber v-model:value="weight" :min="30" :max="200" :step="0.1">
              <template #suffix>kg</template>
            </NInputNumber>
          </div>
        </NSpace>

        <!-- 结果显示 -->
        <div class="text-center">
          <NProgress
            type="circle"
            :percentage="getBMIProgress"
            :color="getBMIStatus.color"
            :height="120"
          >
            <div class="text-xl mb-2">{{ bmi }}</div>
            <NText :color="getBMIStatus.color">
              {{ getBMIStatus.text }}
            </NText>
          </NProgress>
        </div>

        <!-- BMI 说明 -->
        <div class="text-sm text-gray-500">
          <div>BMI 参考范围：</div>
          <div>· 小于 18.5：体重过轻</div>
          <div>· 18.5 - 23.9：体重正常</div>
          <div>· 24.0 - 27.9：超重</div>
          <div>· 大于等于 28：肥胖</div>
        </div>
      </NSpace>
    </NCard>
  </div>
</template>
